{% extends 'base.html' %}

{% block title %}timer task results{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ static_css_element_ui_index }}">
    <style>
        #app {margin-bottom: 20px;}
        .el-table {margin-bottom: 20px;}
        .count_info {
            color: #67c23a;
            font-weight: bold;
        }
        .count_warn {
            color: red;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript" src="{{ static_js_vue_min }}"></script>
    <script type="text/javascript" src="{{ static_js_element_ui_index }}"></script>
{% endblock %}


{% block body %}
<script>
// Fire would jump with flash
//window.onload = function(){
    //if (location.search.indexOf('flash=') != -1) {
//        var timestamp = Math.floor(Date.now() / 1000);
//        history.pushState(null, '', [location.protocol, '//', location.host, location.pathname, '?t=', timestamp].join(''));
    //}
//};
</script>


<h2>
    <a class="button normal" href="{{ url_tasks }}">Tasks</a>
    <a class="button warning forbid" href="javascript:;">Task #{{ task_id }} {% if task and task.name %}({{ task.name }}){% endif %}</a>
    {% if task %}{{ task.project }}/{{ task.version }}/{{ task.spider }}/{{ task.jobid }}{% endif %}
</h2>

<div id="app">
<template>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        empty-text="There is nothing to display."
        :max-height="maxHeight"
        :default-sort="{prop: 'execute_time', order: 'descending'}"
        style="width: 100%;"
        :size="size"
        
        highlight-current-row
        @current-change="handleSelectRow"
    >
        <!-- :fit=false -->
        
        <el-table-column prop="index" label="Index" sortable align="center" width="100"></el-table-column>
        <!-- <el-table-column prop="id" label="#" sortable align="center" width="80"></el-table-column> -->
        <el-table-column prop="execute_time" label="Execute time" sortable align="center" width="155"></el-table-column>
        <el-table-column prop="fail_count" label="Fail count" sortable :sort-orders="sortOrders" align="center" width="120">
            <template slot-scope="scope"><span :class="scope.row.fail_count_class">{{scope.row.fail_count}}</span></template>
        </el-table-column>
        <el-table-column prop="pass_count" label="Pass count" sortable align="center" width="120">
            <template slot-scope="scope"><span :class="scope.row.pass_count_class">{{scope.row.pass_count}}</span></template>
        </el-table-column>
        <el-table-column prop="task_job_results" label="Job results" sortable :sort-method="sortJobResults" :sort-orders="sortOrders" align="center" width="115">
           <template slot-scope="scope"><a :class="scope.row.task_job_results_class" :href="scope.row.url_task_job_results">Details</a></template>
        </el-table-column>
        <el-table-column prop="action" label="Action" sortable :sort-method="sortJobResults" :sort-orders="sortOrders" align="left" min-width="90">
            <template slot-scope="scope"><a class="state delete" @click="deleteRow(scope.$index, tableData)">Delete</a></template>
        </el-table-column>
    </el-table>
    
    <el-pagination
        background
        :total='{{ task_results.total }}'
        :page-sizes="[10, 100, 1000]"
        :page-size='{{ task_results.per_page }}'
        :page-count='{{ task_results.pages }}'
        :current-page.sync="currentPage"
        
        :pager-count="11"
        layout="total, sizes, prev, pager, next"
        
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>    
</template>
</div>


<script>
var Main = {
    data() {
        return {
            size: {% if task_results.per_page > 10 %}'mini'{% else %}'—'{% endif %},
            maxHeight: window.innerHeight - 220,
            currentPage: {{ task_results.page }},
            sortOrders: ['descending','ascending',null],
            tableData: [
        {% for task_result in task_results.items %}
            {
                index: {{ task_result.index }},
                id: {{ task_result.id }},
                execute_time: '{{ task_result.execute_time }}',
                fail_count: {{ task_result.fail_count }},
                pass_count: {{ task_result.pass_count }},
                fail_count_class: {% if task_result.fail_count > 0 %}'count_warn'{% else %}''{% endif %},
                pass_count_class: {% if task_result.pass_count > 0 %}''{% else %}'count_warn'{% endif %},
                  
                url_action: '{{ task_result.url_action }}',
                
                url_task_job_results: '{{ task_result.url_task_job_results }}',
                task_job_results_class:  {% if task_result.fail_count %}'state danger'{% elif task_result.pass_count %}'state safe'{% else %}'state warning'{% endif %},

            },
        {% endfor %}
            ],

        }
    },

    methods: {
        handleSelectRow(val) {
            this.currentRow = val;
        },
        deleteRow(index, rows) {
            deleteRowXHR(rows[index].url_action);
            rows.splice(index, 1);
        },
        handleCurrentChange(val) {
            console.log(val);
            location.href = '.?page=' + val;
        },
        handleSizeChange(val) {
            console.log(`perpage ${val}`);
            location.href = '.?per_page=' + val;
        },
        sortJobResults(a, b) {
            return a.fail_count > b.fail_count ? 1 : a.pass_count > b.pass_count ? -1 : 1;
        },
    }
}
var Ctor = Vue.extend(Main);
vm = new Ctor().$mount('#app');
</script>
{% endblock %}
